<template>
  <div>
    <!-- <zujianGD></zujianGD> -->
    <div class="center">
      <h3>联系信息与服务地址</h3>
      <el-form
        ref="ruleFormRef"
        :model="form"
        :rules="rules"
        class="demo-ruleForm"
        status-icon>
        <el-form-item prop="sdate" label="服务时间" >
          <el-date-picker
            class="w-140"
            v-model="value1"
            :disabled-date="disabledDate"
            type="date"
            placeholder="请选择服务日期"
            format="YYYY-MM-DD"
          />
          <el-time-select
          class="w-140"
            v-model="time"
            start="06:00"
            step="00:30"
            end="21:30"
            placeholder="请选择服务时间"
          />
        </el-form-item>
        <el-form-item label="服务城市" prop="scity">
          <el-select v-model="form.scity" class="m-2 w-390" placeholder="Select">
            <el-option
            :label="form.scity"
            :value="form.scity"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="联系姓名" class="linkneme" prop="linkman">
          <el-input v-model="form.linkman" placeholder="输入联系人" class="w-140" />
          <el-radio-group v-model="form.sex" class="ml-4 w-140">
            <el-radio label="1">先生</el-radio>
            <el-radio label="2">女士</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="小区名称" prop="plot">
          <el-input v-model="form.plot" id="keyword" class="w-390" @input="day" placeholder="请搜索小区/酒店/写字楼名称" :suffix-icon="Search"/>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input 
          class="w-140" 
          placeholder="输入本人手机号" 
          v-model="form.phone"
          
          maxlength="11" />
        </el-form-item>
        <el-form-item label="门牌号码" prop="dpprplate">
          <el-input placeholder="请输入详细地址门牌号" class="w-390" v-model="form.dpprplate" />
        </el-form-item>
      </el-form>
      <el-table :data="detail" stripe style="width: 100%">
      <el-table-column  label="服务信息" width="390">
        <template #default="scope">
          <div class="fengmian">
            <img :src="scope.row.simg" alt="" style="width:75px ;">
            <div>
              <b>{{ scope.row.title }}</b>
              <span>{{ specifications.specif }} </span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="shop" label="店铺信息" width="180" />
      <el-table-column prop="" label="单价">
        <template #default>
          <span>{{ specifications.sprice||detail[0].show_price }}{{ specifications.unit||detail[0].unit }}</span>
        </template>
      </el-table-column>
      <el-table-column label="数量">
        <template #default="scope">
          <counter type="inline" :data="scope.row.count" @counter="bianhua"></counter>
        </template>
      </el-table-column>
      <el-table-column label="小计">
        <template #default>
          <span>{{ total }}元</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="jin">
      <span>服务金额:</span>
      <span v-if="total">￥{{total}}</span>
      <p>应付金额：<b v-if="total">￥ {{total}}</b></p>
      <button @click="submitForm(ruleFormRef)">提交订单</button>
    </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import AMapLoader from "@amap/amap-jsapi-loader";
import zujianGD from '@/components/zujianGD.vue'
import counter from '@/components/counter.vue'
import { defineComponent, reactive, ref ,computed,onMounted} from 'vue'
import { Search } from '@element-plus/icons-vue'
import httpApi from '@/http';
import { useRoute } from 'vue-router';
import details from '@/types/details'
import type { FormInstance, FormRules } from 'element-plus'
import { useStore } from 'vuex';
interface order{
  sdate?:string
  linkman?:string
  sex?:Number
  plot?:string
  phone?:number
  dpprplate?:string
  sd_id?:number
  ad_id?:number
  scity?:string
}

const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
  sdate:[
  { required: true, message: '该内容不能为空', trigger: 'blur' }
  ],
  linkman:[{ required: true, message: '该内容不能为空', trigger: 'blur' }],
  plot:[{ required: true, message: '该内容不能为空', trigger: 'blur' }],
  phone:[{ required: true, message: '该内容不能为空', trigger: 'blur' }],
  dpprplate:[{ required: true, message: '该内容不能为空', trigger: 'blur' }],
  scity:[{ required: true, message: '该内容不能为空', trigger: 'blur' }],
})

let count =ref()
function bianhua(e:number){
  count.value = e
}
let time = ref()
let form = reactive<order>({})
let detail = reactive<details[]>([])
let {id,...specifications } = useRoute().query
form.sd_id = id
form.scity = computed(()=>{
  return useStore().state.city
})

httpApi.fuwudetail.queryServeDetail({id:useRoute().query.id}).then((result) => {
  console.log(result.data.data[0].stime);
  time.value = result.data.data[0].stime.split('-')
  detail.push(...result.data.data)
  count.value = result.data.data[0].count
})

form.sex = '1'
let value1 =ref()
let date =JSON.stringify([value1.value,time.value])
form.sdate = JSON.stringify([value1.value,time.value])
const disabledDate = (time: Date) => {
  return time.getTime() < Date.now()
}

const total = computed(()=>{
  return (count.value||1) * specifications.sprice
})
function day(e){
  console.log(e);
  console.log(time,value1);
}
const login = localStorage.getItem('user') || sessionStorage.getItem('user') || 1
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    date=JSON.stringify([value1.value,time.value])
    if(login){
      if (valid) {
        httpApi.Submit.subOrder(form)
        .then((result) => {
          console.log(result);
        }).catch((err) => {
          
        });
      } else {
        console.log('error submit!', fields)
      }
    }else{
      alert('请登录后再提交订单')
    }
  })
}

//地图搜索
const keyword = ref('')
// 存储搜索用的数据
const forms: any = reactive({
  address: '',
})
// const ininMap = () => {
//   AMapLoader.load({
//     key: '2bb7fedc62db70c11dd97b2c97e005bd',//api服务key--另外需要在public中使用安全密钥！！！
//     version: '2.0',// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
//     plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete']// 需要使用的的插件列表
//   }).then((AMap) => {
//         AMap.plugin('AMap.AutoComplete', function(){
//         var autoOptions = {
//           //city 限定城市，默认全国
//           city: '西安',
//           input: 'keyword'
//         };
//         // 实例化AutoComplete
//         var autoComplete= new AMap.AutoComplete(autoOptions);
//         // 根据关键字进行搜索
//         autoComplete.search(keyword, function(status, result) {
//           // 搜索成功时，result即是对应的匹配数据
//           console.log(result);
//           ccc=result
//         })
//         autoComplete.on('select',selectSite)
//         function selectSite(e){
//           console.log(e);
//         }
//       })
//     })
// }
// ininMap()
</script>

<style lang="scss" scoped>
 .el-form{
  margin-top: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .el-form-item{
    width:600px;
    .w-140{
      width: 140px;
    }
    .w-390{
      width: 390px;
    }
    .ml-4{
      margin-left: 20px;
    }
  }
}
.fengmian{
  display: flex;
  div{
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    justify-content: space-around;
    b{
      font-size: 16px;
    }
  }
}
.jin{
  text-align: right;
  margin-top: 20px;
  span{
    display: inline-block;
    padding: 20px 20px 30px;
  &:first-child{
    margin-right: 100px;
    color: #333;
  }
  }

  >p{
    background-color: #f5f5f5;
    padding: 20px;
    margin-bottom: 20px;
    b{
      color: #CA3544;
      font-size: 18px;
    }
  }
  button {
    width: 120px;
    line-height: 40px;
    font-size: 16px;
    font-weight: 400;
    margin-top: 20px;
    border-radius: 5px;
    border: none;
    background-color: #CA3544;
    color: #fff;
    margin-bottom: 40px;
  }
}
</style>